import React,{useState} from 'react'
import {View,StyleSheet,Image,Text} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements'
import {useNavigation} from '@react-navigation/native'
import TouchableView from '../components/touchableView';
import screen from '../utils/screen';
import Images from '../images/Images';
import {useModal} from '../components/useModal';
import SelectMaterial from './selectMaterial';
import LGBtn from '../components/touchableView/lgBtn';
import {useAppStore} from '../store/useAppStore';

const itemW = ( screen.width - 60 ) /2

const SelectData = ()=>{

    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()
    const modal = useModal()
    const {appState} = useAppStore()


    const selectMaterial = ()=>{
        if(appState.authHash){
            navigation.navigate('Result',{title:'支付宝芝麻积分记录',showAuth:true})
        }else{
            modal.showContent(
                <SelectMaterial
                    navigation={navigation}
                    onClose={()=>{
                        modal.close()
                    }}
                />
            )
        }

    }

    return (
        <View style={[styles.container,{paddingTop:headerHeight}]}>

            <Text style={{color:'#333',fontSize:14,marginTop:2}}>请提交以下材料</Text>

            {/*<Text style={{color:'#666',fontSize:14,marginTop:10}}>请提交以下</Text>*/}

            <View style={styles.content}>


                <TouchableView
                    style={[styles.item]}
                    onPress={selectMaterial}
                >
                    <View style={styles.rowCenter}>
                        <Image source={Images.zmxy} style={styles.icon} resizeMode={'contain'}/>
                        <Text style={styles.title}>支付宝芝麻积分记录</Text>
                    </View>

                    <Image source={appState.authHash ? Images.more : Images.add} style={styles.rightIcon} resizeMode={'contain'}/>
                </TouchableView>

                <TouchableView
                    style={styles.item}
                    onPress={()=>{
                        navigation.navigate('Result',{title:'公积金记录'})
                    }}
                >
                    <View style={styles.rowCenter}>
                        <Image source={Images.gongjijin} style={styles.icon} resizeMode={'contain'}/>
                        <Text style={styles.title}>公积金记录</Text>
                    </View>

                    <Image source={Images.more} style={styles.rightIcon} resizeMode={'contain'}/>
                </TouchableView>

                <TouchableView
                    style={styles.item}
                    onPress={()=>{
                        navigation.navigate('Result',{title:'受雇记录'})
                    }}
                >
                    <View style={styles.rowCenter}>
                        <Image source={Images.sgjl} style={styles.icon} resizeMode={'contain'}/>
                        <Text style={styles.title}>受雇记录</Text>
                    </View>

                    <Image source={Images.more} style={styles.rightIcon} resizeMode={'contain'}/>
                </TouchableView>

                <LGBtn
                    title={'下一步'}
                    style={styles.nextBtn}
                    onPress={()=>{
                        navigation.navigate('Clause')
                    }}
                />

            </View>

        </View>
    )
}

export default SelectData

const styles = StyleSheet.create({
    container:{
        flex:1, backgroundColor:'#fff',paddingHorizontal:20
    },
    content:{
        flex:1,marginTop:20
    },
    rowCenter:{
        flexDirection:'row',alignItems:'center'
    },
    item:{
        width:'100%',height:screen.PIXEL_200,backgroundColor: '#F6F8FB',
        marginBottom:20,justifyContent: 'space-between',alignItems:'center',
        flexDirection:'row',paddingHorizontal: 20,borderRadius:screen.PIXEL_16
    },
    title:{
        color:'#333',fontSize:16,fontWeight:'500',marginLeft:10
    },
    icon:{
        width:screen.PIXEL_80,height:screen.PIXEL_70
    },
    rightIcon:{
        width:screen.PIXEL_60,height:screen.PIXEL_60
    },
    nextBtn:{
        alignSelf:'center',marginTop:30
    }
})
